<template>
    <!-- 视图部分 -->
    <div class="main">
        <div class="box1">购物车</div>
        <div class="box2" >
            <div class="box2-a">
              <div class="box2-c" v-for="item  in  filmInfo"  :key="item.goods_id">
                                                               <!--  v-model双向绑定数据 -->
                <input type="checkbox" :value="item.goods_id"  v-model="buy" class="inputcss"/>
                    <van-card
                        :num="item.goods_count"
                        :price="item.goods_price"
                        :thumb="item.goods_img"
                        :desc="item.goods_name"
                    >
                    </van-card>
                    <van-stepper v-model="item.goods_count" />
              </div>
            </div>
        </div>
        <!--                     定义的                             定义   -->
        <van-submit-bar :price="total" button-text="支付" @submit="go(total)">
            <van-checkbox v-model="isCheckAll" @change="checkAll">全选</van-checkbox>
            <template #tip>
                💬 您的订单为虚拟订单（支付后不发货）, 请勿支付大额款项！
            </template>
        </van-submit-bar>   
    </div> 
</template>

<script>
import Vue from 'vue';
import { Card, tag, Button, SubmitBar, Checkbox, Stepper, Radio, RadioGroup,Dialog, Toast } from 'vant';

Vue.use(Card);
Vue.use(tag);
Vue.use(Button);
Vue.use(SubmitBar);
Vue.use(Checkbox);
Vue.use(Stepper);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Dialog);
Vue.use(Toast)

// 逻辑部分
export default {
  data() {
    return {
      value:1,
      radio: [],
      checked:false,
      filmInfo:[],
      buy:[],
      isCheckAll: false,
    };
  },
  
   created() {
        this.$http.get("/api")
        .then((ret) => {
               // console.log(ret)
                 //赋值       
                 this.filmInfo = ret.cartInfo 
         })
   },
   methods :{
    //    go() {
    //        this.$router.push({path:"/zhi"})
    //    },
        go(total) {
            let d = new Date()
            //字符串拼接
            let str = d.getFullYear() +"" +(d.getMonth() + 1 >= 10? +(d.getMonth() + 1): "0" + 
          (d.getMonth() + 1)) +"" +(d.getDate() >= 10 ? d.getDate() : "0" + d.getDate()) +"" +d.getHours() +"" +d.getMinutes() +"" +d.getSeconds();
          // 拼接随机数六位数的
          let arr = parseInt((Math.random()*900000) + 100000 )
          // 拼接
          let WIDout_trade_no = str + arr
          console.log(WIDout_trade_no);
          // 文档中的交易名称
          let WIDsubject = "Vue综合练习（蒋震）"
          // 文档中的交易金额
          let WIDtotal_fee = total
          let url = "https://m.28sjw.com/alipay_wap/alipayapi.php?" + "WIDout_trade_no=" + WIDout_trade_no + "&WIDsubject=" + WIDsubject + "&WIDtotal_fee=" + WIDtotal_fee
          // 在新窗口打开页面
          window.open(url, "_blank")
          // 订单状态接口
          this.$http.get("https://m.28sjw.com/order/orderPayStatusCheck.php?_oid=" + WIDout_trade_no)
          .then((ret) => {
            function beforeClose(action, done) {
                if (action === 'confirm') {
                    setTimeout(done, 1000);
                } else {
                    done();
                }
            }
            Dialog.confirm({
            title: '支付成功？',
            message: '如果您已支付成功，请点击“确认”',
            beforeClose,
            });
          })
        },
    // 全选
        checkAll() {
                // this.buy = [];
                // if (this.isCheckAll) {
                //     // 全选
                //         this.filmInfo.forEach((goods_id) => {
                //         this.buy.push(goods_id);
                //     });
                // }
                if (this.isCheckAll) {
                this.buy = [];
                this.filmInfo.forEach((el) => {
                  this.buy.push(el.goods_id);
                });
              }
            }, 
    },
    // 计算属性
    computed: {
        total() {
        let sum = 0;
        this.filmInfo.forEach((el) => {
            if (this.buy.includes(el.goods_id)) {
               sum += el.goods_price * 1000 * el.goods_count;
            }
        });
        return sum;
        },
    },
    // 侦听属性
    watch: {
        buy: function () {
            this.isCheckAll = (this.buy.length == this.filmInfo.length) && (this.filmInfo.length != 0)
        },
    },
       
};
</script>
  
<style scoped>
/* 样式部分 */
.box1{
    text-align: center;
    font-size:24px;
}
.box2{
    display:flex;
}
.box2-a{
    width:360px;
    margin-top:40px;
}
.van-stepper{
  position:absolute;
    margin-left:260px;
   margin-top:-1px;
}
.box4{
   width:100px;
   height:50px;
   margin-top: -40px;
   margin-left:200px;
} 
.van-card {
  width: 420px;
}
.van-submit-bar{
  width:400px;
}
</style>